<template>

	<!-- 页面头部信息和设置图标，标题 -->
	<my-Back-search :yesSearch="false">
		<template #back>
			<ucs-svg width="28" height="28" src='<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 24 24">
					<g fill="none" stroke="#ff0000" stroke-linecap="round" stroke-width="2" data-swindex="0">
						<g>
							<path stroke-dasharray="4" stroke-dashoffset="4" d="M12 3V5">
								<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="4;0"></animate>
							</path>
							<path stroke-dasharray="28" stroke-dashoffset="28"
								d="M12 5C8.68629 5 6 7.68629 6 11L6 17C5 17 4 18 4 19H12M12 5C15.3137 5 18 7.68629 18 11L18 17C19 17 20 18 20 19H12">
								<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" values="28;0">
								</animate>
							</path>
							<animateTransform attributeName="transform" begin="0.8s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
								repeatCount="indefinite" type="rotate" values="0 12 3;3 12 3;-3 12 3;0 12 3;0 12 3">
							</animateTransform>
						</g>
						<path stroke-dasharray="8" stroke-dashoffset="8"
							d="M10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20">
							<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="8;0"></animate>
							<animateTransform attributeName="transform" begin="1s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
								repeatCount="indefinite" type="rotate" values="0 12 8;6 12 8;-6 12 8;0 12 8;0 12 8">
							</animateTransform>
						</path>
					</g>
				</svg>'></ucs-svg>
		</template>
		<template #time>
			<view>我的</view>
		</template>
		<template #search>
			<navigator url="/pages/geid/set/set">
				<uni-icons type="gear" size="28" color="#ff0000"></uni-icons>
			</navigator>
		</template>
	</my-Back-search>

	<!-- 一登陆 -->
	<view class="user">
		<view class="userImg">
			<image :src="users.userImg" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="userID">
			<view style="padding: 8rpx 0;">{{users.username}}</view>
			<view class="color">编号: ArTv{{users.id}}</view>
			<view class="color">到期: {{timeStatus}}</view>
		</view>
	</view>

	<!-- 会员中心-->
	<view class="setIcon" v-if="true">
		<view class="icon-flex">
			<view class="icon-test">会员中心</view>
			<navigator open-type="switchTab" url="/pages/alpay/alpay" class="icon-bottom">续费</navigator>
		</view>

		<view>

		</view>
	</view>

	<!-- 分享与下载按钮 -->
	<view class="bottum">
		<!-- 收藏 -->
		<view @click="onCollent('/pages/geid/collent/collent')">
			<view class="bottum-Bg">
				<uni-icons type="star" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">收藏</view>
		</view>

		<!-- 推荐 -->
			<view @click="onCollent('/pages/geid/trailer/trailer')">
			<view class="bottum-Bg">
				<uni-icons type="hand-up" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">推荐</view>
		</view>
		
		<!-- 观看记录 -->
		<view @click="onCollent('/pages/geid/watch/watch')">
			<view class="bottum-Bg">
				<uni-icons type="eye" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">观看</view>
		</view>
		
		<!-- 钱包 -->
		<view @click="onCollent('/pages/geid/coins/coins')">
			<view class="bottum-Bg">
				<uni-icons type="wallet" size="28" color="#fff"></uni-icons>
			</view>
			<view class="bottum-text">钱包</view>
		</view>

	</view>
	<!-- 观看历史 -->
	<view class="wchat">
		<max-title-min url="/pages/geid/watch/watch" :fontSize="26" title="历史记录" text="更多"></max-title-min>
		<view class="wchat-flex">
			<view class="total">
				<view>{{WatchValue.length}}</view>
				<view style="font-size: 22rpx;">看过</view>
			</view>
			<view class="scroll-tou">
				<scroll-view class="scroll" scroll-x>
					<navigator class="scroll-nav" v-for="item in WatchValue" :url="`/pages/play/play?id=${item.collection[0].id}`">
						<view>
							<image style="width: 100%; height: 180rpx;" :src="item.collection[0].imageUrl"></image>
						</view>
						<view class="scroll-title">{{item.collection[0].name}}</view>
					</navigator>
				</scroll-view>
			</view>
		</view>
	</view>
	<!-- 我的服务 -->
	<view class="wchat">
		<max-title-min :fontSize="32" :isIcon="false" title="我的服务" text="更多"></max-title-min>
		<!-- 下列服务 -->
		
		<view class="fen-bottum">
			<view>联系我们</view>
			<button class="b-abs" open-type="contact" size="mini" plain="true">
				<uni-icons size="15" color="#ff0000" type="forward"></uni-icons>
			</button>
		</view>
		
		<view class="fen-bottum">
			<view>分享小程序</view>
			<button class="b-abs" open-type="share" size="mini" plain="true">
					<uni-icons size="15" color="#ff0000" type="forward"></uni-icons>
			</button>
		</view>
		<!-- <max-title-min :fontSize="25" title="我的服务"></max-title-min> -->
	</view>



</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		collectionWath
	} from '@/API/geidApis.js';
	
	const WatchValue = ref([]);  //观看记录
	const users = ref([]);
	const timeStatus = ref();

	// 观看记录
	const watchFunction = async () => {
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		timeStatus.value = formatTimestamp(user.statusCreate);
		users.value = user;
		// #endif
		let res = await collectionWath(1,user.id);
		WatchValue.value = res.list;
		console.log("观看记录内容：", res);

	}
	// 观看记录
	watchFunction();
	
	// 时间码转换
	function formatTimestamp(timestamp) {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
		const day = String(date.getDate()).padStart(2, '0');
		const hour = String(date.getHours()).padStart(2, '0');
		const minute = String(date.getMinutes()).padStart(2, '0');
	
		return `${year}-${month}-${day} ${hour}:${minute}`;
	}


	// 收藏页面
	function onCollent(url) {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style scoped lang="scss">
	.user {
		width: 92%;
		position: relative;
		left: 4%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #1d1d1d;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);

		.userImg {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			overflow: hidden;

		}

		.userID {
			padding: 0 30rpx;

			.color {
				color: #969696;
				padding: 8rpx 0;
				font-size: 23rpx;
			}
		}
	}

	.setIcon {
		margin-top: 30rpx;
		background-color: #ff0000;
		width: 92%;
		position: relative;
		left: 4%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);


		.icon-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon-test {
				font-weight: bold;
				font-size: 28rpx;
			}

			.icon-bottom {
				font-size: 22rpx;
				background: #1d1d1d;
				color: #ff0000;
				padding: 5rpx 20rpx;
				border-radius: 30rpx;
				animation: pulse 1.2s ease-in-out infinite both;
			}

			@keyframes pulse {
				0% {
					transform: scale(1);
					border-color: #fff;
					box-shadow: 0 0 12rpx transparent;
				}

				50% {
					transform: scale(1.03);
					border-color: #fff;
					box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.6);
				}

				100% {
					transform: scale(1);
					border-color: #fff;
					box-shadow: 0 0 12rpx transparent;
				}
			}

		}

	}

	.bottum {
		box-sizing: border-box;
		padding: 30rpx 60rpx;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;

		.bottum-Bg {
			background: $App-title-color;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 70rpx;
			height: 70rpx;
			border-radius: 15rpx;
			margin-bottom: 10rpx;
		}

		.bottum-text {
			font-size: 22rpx;
		}
	}

	.wchat {
		background: #1d1d1d;
		margin-top: 30rpx;
		width: 92%;
		position: relative;
		left: 4%;
		padding: 10rpx 0 30rpx 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(255, 0, 0, 0.2);

		.wchat-flex {
			display: flex;
			align-items: center;
			width: 100%;
			overflow: hidden;
		}

		.total {
			margin-left: 20rpx;
			margin-right: 10rpx;
			margin-bottom: 20rpx;
			width: 23%;
			height: 200rpx;
			background: red;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.scroll ::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}

		.scroll-tou {
			width: 77%;
		}

		.scroll {
			white-space: nowrap;

			.scroll-nav {
				white-space: nowrap;
				margin-right: 15rpx;
				display: inline-block;
				width: 130rpx;
				height: 220rpx;
				border-radius: 15rpx;
				overflow: hidden;

				.scroll-title {
					font-size: 20rpx;
					padding: 0 5rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}

			}
		}
	}
.fen-bottum{
	box-sizing: border-box;
	padding: 30rpx;
	font-size: 25rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.b-abs{
		position: absolute;
		right: 0rpx;
		border: none;
	}
}
</style>